<template>
  <div class="grid" style="gap: 12px">
    <GlassCard>
      <el-form label-position="top" label-width="auto">
        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 12px">
          <el-form-item label="身高 (cm)">
            <el-input-number
              v-model="state.heightCm"
              :min="80"
              :max="250"
              :step="1"
              controls-position="right" />
          </el-form-item>
          <el-form-item label="体重 (kg)">
            <el-input-number
              v-model="state.weightKg"
              :min="10"
              :max="300"
              :step="0.1"
              :precision="1"
              controls-position="right" />
          </el-form-item>
        </div>

        <div class="bmi-result">
          <div class="line">
            <span class="label">当前 BMI：</span>
            <strong class="value">{{ bmiText }}</strong>
          </div>
          <div class="line tag-line">
            <span class="label">分类：</span>
            <el-tag :type="tagType" size="small">{{ categoryText }}</el-tag>
          </div>
          <div class="line">
            <span class="label">正常体重范围：</span>
            <span class="measure">{{ normalWeightRangeText }}</span>
          </div>
          <div class="line warn" v-if="adjustmentText">
            {{ adjustmentText }}
          </div>
        </div>
      </el-form>
    </GlassCard>
  </div>
</template>

<script setup lang="ts">
import { ElForm, ElFormItem, ElInputNumber, ElTag } from "element-plus"
import { computed, reactive } from "vue"

// @ts-ignore - SFC default export by Vue plugin
import GlassCard from "./ui/GlassCard.vue"

type BmiState = {
  heightCm: number
  weightKg: number
}

const state = reactive<BmiState>({
  heightCm: 170,
  weightKg: 65
})

const heightMeters = computed(() => Math.max(0.5, state.heightCm) / 100)

const bmi = computed(() => {
  const h = heightMeters.value
  const w = Math.max(0, state.weightKg)
  const value = w / (h * h)
  if (!isFinite(value)) return 0
  return Number(value.toFixed(1))
})

const categoryText = computed(() => {
  const v = bmi.value
  if (v === 0) return "--"
  if (v < 18.5) return "过轻"
  if (v < 25) return "正常"
  if (v < 30) return "超重"
  return "肥胖"
})

const tagType = computed(() => {
  const v = bmi.value
  if (v < 18.5) return "warning"
  if (v < 25) return "success"
  if (v < 30) return "warning"
  return "danger"
})

const bmiText = computed(() => (bmi.value ? bmi.value.toFixed(1) : "--"))

const normalWeightRangeText = computed(() => {
  const h2 = heightMeters.value * heightMeters.value
  const min = 18.5 * h2
  const max = 24.9 * h2
  if (!isFinite(min) || !isFinite(max)) return "--"
  return `${min.toFixed(1)} kg ~ ${max.toFixed(1)} kg`
})

const adjustmentText = computed(() => {
  const h2 = heightMeters.value * heightMeters.value
  if (!isFinite(h2) || h2 <= 0) return ""
  const min = 18.5 * h2
  const max = 24.9 * h2
  const w = Math.max(0, state.weightKg)
  if (w < min) {
    const gain = (min - w).toFixed(1)
    return `增重 ${gain} kg 回归正常`
  }
  if (w > max) {
    const lose = (w - max).toFixed(1)
    return `减重 ${lose} kg 回归正常`
  }
  return ""
})
</script>

<style scoped lang="less">
.bmi-result {
  background: #ffffff;
  border: 1px solid #e3edf5;
  border-radius: 12px;
  padding: 12px;
  line-height: 1.8;
  text-align: left;
}
.bmi-result .label {
  color: #4b5b76;
  font-weight: 600;
}
.bmi-result .line {
  font-size: 18px;
  margin: 2px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.bmi-result .measure {
  color: #253858;
}
.bmi-result .line.warn {
  color: #e04141;
}
.bmi-result .value {
  font-family:
    "Manrope",
    "Inter",
    "Roboto",
    system-ui,
    -apple-system,
    "Helvetica Neue",
    Arial,
    "Noto Sans",
    sans-serif;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  font-feature-settings:
    "tnum" 1,
    "lnum" 1;
  letter-spacing: 0.2px;
}
</style>
